<template>
  <div class="container-bg">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="form"
        size="medium"
        label-width="150px"
        style="max-width: 1200px"
      >
        <el-col :span="24">
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="registerConfigRestore"
            >恢复默认设置
            </el-button
            >
            <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="exportConfig"
            >参数导出
            </el-button
            >
            <!-- <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm"
              >参数导入</el-button
            > -->
            <el-upload
              style="display: inline-block; margin-left: 10px"
              action=""
              :multiple="false"
              :on-change="importConfig"
              :show-file-list="false"
              :auto-upload="false"
              v-if="roleId!=2"

            >
              <el-button
                slot="trigger"
                type="primary"
                size="medium"
                style="width: 120px"
              >参数导入
              </el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <!--switch-->
        <el-col
          :span="12"
          v-for="(item, index) in configMsg.isEnable"
          :key="index"
        >
          <el-form-item :label="item.name">
            <el-switch v-model="item.isOpen"></el-switch>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-divider/>
    <h3 class="devModeTitle" @click="handleDevMode">
      开发者模式&nbsp;&nbsp;<i class="el-icon-arrow-up" v-show="isDevModeShow"></i>
      <i class="el-icon-arrow-down" v-show="!isDevModeShow"></i>
    </h3>
    <el-row style="padding: 0 20px" :gutter="20" v-show="isDevModeShow">
      <!-- 不带radio的 -->
      <div>
        <el-descriptions
          style="width: 800px"
          :title="item.title"
          :column="column"
          v-for="(item, index) in list"
          :key="index"
          :colon="false"
        >
          <el-descriptions-item
            :label="item2.name"
            v-for="(item2, index2) in item.children"
            :key="index2"
          >
            <el-col :span="24">
              <el-slider
                v-if="item2.range"
                v-model="item2.count"
                :min="item2.range[0]"
                :max="item2.range[1]"
                show-input
              />
            </el-col>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 带radio -->
      <el-row
        class="descriptionsBox"
        style="width: 790px"
        v-for="(item, idx) in radioList"
        :key="idx"
      >
        <div class="title">{{ item.title }}</div>
        <div class="radioBox">
          <div class="rightBox">
            <div
              class="content"
              v-for="(item2, idx2) in item.children"
              :key="idx2"
            >
              <div class="tab-line">
                <div
                  class="status-icon"
                  :class="{ actives: item.isChecked == idx2 }"
                  @click="checkTab(item, idx2, idx)"
                ></div>
              </div>
              <div style="flex: 1">
                <div
                  style="width: 100%"
                  v-for="(item3, idx3) in item2.children"
                  :key="idx3"
                >
                  <!--<div class="title">最小瞳孔距离像素</div>-->
                  <div class="title">{{ item3.name }}</div>
                  <div class="slider">
                    <el-slider v-model="item3.count" show-input/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-row>
    </el-row>

    <el-button
      type="primary"
      size="medium"
      style="width: 120px"
      @click="submitForm"
    >保存
    </el-button
    >
  </div>
</template>

<script>
import {
  getRegisterConfigsApi,
  editRegisterConfigsApi,
  registerConfigRestoreApi,
} from "@/api/access/equipment.js";
import {mapGetters,mapMutations} from 'vuex'


export default {
  name: "MvCloudgateTerminalDistinguishConfig",

  data() {
    return {
      isDevModeShow: true,
      column: 1,
      form: {},
      select: 1,
      unSelect: 0,
      configMsg: {},
      list: [],
      radioList: [],
    };
  },
  created() {
    this.getRegisterConfigs();
  },
  mounted() {
  },
  computed: {
    ...mapGetters(["roleId"]),
  },

  methods: {
    submitForm() {
      let params = {...this.configMsg};
      params.mode.length = 0;
      params.mode = params.mode.concat(this.list, this.radioList);
      editRegisterConfigsApi(params).then((res) => {
        // console.log(res);
        this.$message.success("保存成功");
        this.getRegisterConfigs();
      });
    },
    importConfig(uploadFile, uploadFiles) {
      // console.log(uploadFile);
      if (uploadFile.raw.type != "application/json") {
        this.$message.error("只能是 JSON 格式!");
        return false;
      }
      const reader = new FileReader();
      reader.readAsText(uploadFile.raw, "utf8");

      reader.onload = () => {
        // console.log(reader.result);
        let params = {...JSON.parse(reader.result)};
        // params.mode.length = 0;
        // params.mode = params.mode.concat(this.list, this.radioList);

        editRegisterConfigsApi(params).then((res) => {
          // console.log(res);
          this.$message.success("保存成功");
          this.getRegisterConfigs();
        });
      };
    },

    exportConfig() {
      getRegisterConfigsApi().then((res) => {
        console.log(res);
        let jsonStr = JSON.stringify(res);
        this.saveAsJson(jsonStr);
      });
    },
    saveAsJson(str) {
      let fileName = `${new Date().getTime()}.json`;
      const blob = new Blob([str], {type: "application/json;charset=utf-8"});
      const href = URL.createObjectURL(blob);
      const alink = document.createElement("a");
      alink.style.display = "none";
      alink.download = fileName; // 下载后文件名
      alink.href = href;
      document.body.appendChild(alink);
      alink.click();
      document.body.removeChild(alink); // 下载完成移除元素
      URL.revokeObjectURL(href); // 释放掉blob对象
    },
    handleDevMode() {
      this.isDevModeShow = !this.isDevModeShow;
    },
    getRegisterConfigs() {
      getRegisterConfigsApi().then((res) => {
        this.configMsg = res;
        this.radioList = res.mode.filter((item) => {
          return item.hasOwnProperty("isChecked");
        });
        this.list = res.mode.filter((item) => {
          let current = item.hasOwnProperty("isChecked");
          return !current;
        });
        // console.log(this.radioList);
        // console.log(this.list);
      });
    },
    checkTab(row, idx2, idx) {
      // console.log(idx, idx2);
      // console.log(this.radioList[idx]);
      this.radioList[idx].isChecked = idx2;
      // console.log(this.radioList);
      // console.log(row);
    },
    registerConfigRestore() {
      this.$confirm("此操作将恢复默认设置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          registerConfigRestoreApi({type: 0}).then((res) => {
            // console.log(res);
            this.$message.success("恢复默认设置成功");
            this.getRegisterConfigs();
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-descriptions-item__label {
  width: 150px;
}

.devModeTitle {
  &:hover {
    cursor: pointer;
  }
}

.descriptionsBox {
  .title {
    color: #303133;
    font-weight: bold;
  }

  .radioBox {
    width: 100%;
    // height: 500px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .radioContent {
      display: flex;
    }
  }
}

.tab-line {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  // background-color: #f9f9f9;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;

  .status-icon {
    position: relative;
    cursor: pointer;

    &::after {
      position: absolute;
      content: "";
      left: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      border-width: 1px;
      border-style: solid;
      border-color: #006eff;
      border-radius: 50%;
    }
  }

  .actives {
    &::before {
      position: absolute;
      content: "";
      left: -6px;
      top: -6px;
      width: 12px;
      height: 12px;
      background-color: #006eff;
      border-radius: 50%;
    }
  }
}

.rightBox {
  display: flex;
  flex-direction: column;
  flex: 1;

  .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
  }

  .title {
  }

  .slider {
    flex: 1;
  }
}
</style>
